<script setup>
	import { onMounted, ref } from 'vue'
	import { onLoad, onReachBottom } from '@dcloudio/uni-app'
	import { http } from '@/utils/http.js'
	import { parseTime } from '@/utils/index.js'

	//tab
	const activeIndex = ref(1)
	const currentPage = ref(1)
	function chooseTab(name, title) {
		console.log(name, title)
		activeIndex.value = name
		currentPage.value = 1
		dataList.value = []
		getList()
	}

	const dataList = ref([])
	async function getList() {
		const res = await http.request({
			url: '/api/bidding/transactionLog',
			method: 'POST',
			data: {
				page: currentPage.value,
				limit: 10,
				in_type: activeIndex.value,
			},
		})
		console.log(res)
		dataList.value = [...dataList.value, ...res.data]
	}

	function getMoreNotice() {
		++currentPage.value
		getList()
	}

	function getMoreDetail() {
		++currentPage.value
		getList()
	}

	onMounted(() => {
		getList()
	})
</script>

<template>
	<view class="notice-content">
		<y-tabs v-model="activeIndex" sticky @change="chooseTab">
			<y-tab class="y-tab-virtual" :title="'收入明细'" name="1">
				<scroll-view
					scroll-y="true"
					class="scroll-Y"
					style="height: 90vh"
					@scrolltolower="getMoreNotice"
				>
					<view style="padding: 0 20rpx">
						<view
							class="come-item"
							v-for="(item, index) in dataList"
							:key="item.id"
						>
							<view class="come-item-left">
								<view class="" style="font-size: 28rpx">
									{{ item.title }}
								</view>
								<view
									class=""
									style="font-size: 22rpx; color: #9b9b9d"
								>
									{{ parseTime(item.add_time) }}
								</view>
							</view>
							<view class="come-item-right">
								<view
									class=""
									style="
										font-size: 28rpx;
										font-weight: 700;
										margin-right: 10rpx;
									"
								>
									{{ item.money }}
								</view>
								<image
									src="@/static/xinshi.png"
									style="width: 52rpx; height: 40rpx"
									mode=""
								></image>
							</view>
						</view>
					</view>
				</scroll-view>
			</y-tab>
			<y-tab class="y-tab-virtual" :title="'提现明细'" name="2">
				<scroll-view
					scroll-y="true"
					class="scroll-Y"
					style="height: 90vh"
					@scrolltolower="getMoreDetail"
				>
					<view style="padding: 0 20rpx">
						<view
							class="cash-item"
							v-for="(item, index) in dataList"
							:key="item.id"
						>
							<image
								src="../../static/zhifubbao.png"
								style="
									width: 60rpx;
									height: 60rpx;
									margin-right: 30rpx;
									border-radius: 50%;
									flex-shrink: 0;
								"
								mode=""
							></image>
							<view class="cash-item-right">
								<view class="">
									<view class="" style="font-size: 28rpx">
										{{ item.title }}
									</view>
									<view
										class=""
										style="font-size: 22rpx; color: #9b9b9d"
									>
										{{ parseTime(item.add_time) }}
									</view>
								</view>
								<view
									class=""
									style="font-size: 28rpx; font-weight: 700"
								>
									{{ item.money }}
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</y-tab>
		</y-tabs>
	</view>
</template>

<style lang="scss" scoped>
	.notice-content {
		margin-top: 58rpx;
		.come-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 152rpx;
			border-bottom: 2rpx solid #f5f5f5;
			.come-item-right {
				display: flex;
				align-items: center;
			}
		}
		.cash-item {
			display: flex;
			align-items: center;
			.cash-item-right {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				height: 152rpx;
				border-bottom: 2rpx solid #f5f5f5;
			}
		}
	}
	/* #ifdef MP-QQ || MP-BAIDU || MP-TOUTIAO || MP-LARK || MP-KUAISHOU */
	.y-tab-virtual {
		position: relative;
		flex-shrink: 0;
		width: 100%;
		height: 100%;
	}
	/* #endif */
	@keyframes scroll {
		0% {
			transform: translateX(0);
		}
		100% {
			transform: translateX(
				calc(-426rpx)
			); /* 单个图片宽度 * 图片数量的一半 */
		}
	}
	::v-deep .y-tabs {
		// padding-top: 30rpx;
		top: -30rpx;
		border-radius: 36rpx;
		// background-color: #fff;
	}
	::v-deep .y-tabs__content {
		// height: 100vh;
		// overflow: auto !important;
	}
	::v-deep .y-tab__pane {
		overflow: auto;
		// height: 100vh !important;
	}
	::v-deep .y-tabs__wrap {
		background-color: #fff !important;
	}
	::v-deep .y-tabs__scroll {
		width: 360rpx !important;
		height: 64rpx;
		left: 25%;
	}
	::v-deep .y-tab {
		height: 64rpx !important;
		margin: 0 20rpx;
		color: #1a1a1a !important;
		font-weight: 700 !important;
		z-index: 9 !important;
	}
	::v-deep .y-tabs__nav {
		border-radius: 32rpx;
		background-color: #f7f7f7;
	}
	::v-deep .y-tabs__nav .is-active {
		border-radius: 32rpx !important;
		margin: 0 !important;
		padding: 0 34rpx !important;
		background-color: $transaction-color !important;
		color: #3d3d3d !important;
		font-weight: 700;
	}
	::v-deep .y-tab__text {
		font-size: 28rpx;
	}
	::v-deep .y-tabs__bar {
		display: none !important;
		// width: 50% !important;
		// height: 100% !important;
		// transform: translate3d(0,0,0) !important;
		// border-radius: 32rpx !important;
		// bottom: 0 !important;
		// background-color: #7863ff !important;
	}
</style>
